<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>采购列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20" class="query">
        <el-col :span="7">
          <el-date-picker v-model="rangedDate"
            type="daterange"
            value-format='yyyy-MM-dd'
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" @click="search">查询</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button @click="clear">重置</el-button>
        </el-col>
      </el-row>
      <!-- 列表区域 -->
      <el-table :data="purchaseList" border v-loading="loading" stripe style="width: 100%">
        <el-table-column label="ID" prop="id" width="75" align="center"></el-table-column>
        <el-table-column label="订单时间" prop="date" min-width="135" align="center"></el-table-column>
        <el-table-column label="类别" prop="product" min-width="85" align="center"></el-table-column>
        <el-table-column label="产品名称" prop="productn" min-width="160" align="center"></el-table-column>
        <el-table-column label="规格" prop="model" min-width="160" align="center"></el-table-column>
        <el-table-column label="数量" prop="amoumt" min-width="110" align="center"></el-table-column>
        <el-table-column label="单位" prop="unit" min-width="110" align="center"></el-table-column>
        <el-table-column label="单价" prop="price" min-width="110" align="center"></el-table-column>
        <el-table-column label="仓库价格" prop="housecost" min-width="150" align="center"></el-table-column>
        <el-table-column label="进货金额" prop="total" min-width="150" align="center"></el-table-column>
        <el-table-column label="实付" prop="paid" min-width="150" align="center"></el-table-column>
        <el-table-column label="应付" prop="notpaid" min-width="150" align="center"></el-table-column>
        <el-table-column label="入库状态" prop="status" width="100" align="center">
          <template slot-scope="scope">
            <div v-if="role == 1 || role == 3">
              <el-button type="danger" icon="el-icon-close" size="mini" circle @click="openBox(scope.row.id, 1)" v-if="scope.row.inhouse === 0"></el-button>
              <el-button type="success" icon="el-icon-check" size="mini" circle @click="openBox(scope.row.id, 0)" v-if="scope.row.inhouse !== 0"></el-button>
            </div>
            <div v-else>
              <el-button type="danger" icon="el-icon-close" size="mini" circle disabled v-if="scope.row.inhouse === 0"></el-button>
              <el-button type="success" icon="el-icon-check" size="mini" circle disabled v-if="scope.row.inhouse !== 0"></el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="入仓时间" prop="installtime" min-width="125" align="center"></el-table-column>
        <el-table-column label="结算方式" prop="js" min-width="105" align="center"></el-table-column>
        <el-table-column label="供应商" prop="gys" min-width="160" align="center"></el-table-column>
        <el-table-column label="操作" width="170" fixed="right" align="center">
          <template slot-scope="scope">
              <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              v-if="role == 1 || role == 3"
              >修改实付</el-button>
              <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              v-if="scope.row.inhouse == 0 && (role == 1 || role == 3)">删除</el-button>
              <el-button
                size="mini"
                type="warning"
                @click="handlePrint(scope.$index, scope.row)"
                v-else
                >打印</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pager.currPage"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="pager.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.totalRecord">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      role: '',
      rangedDate: null,
      searchData: {
        start_date: '',
        end_date: ''
      },
      loading: true,
      purchaseList: [],
      pager: {
        currPage: 1,
        pageSize: 10,
        totalRecord: 0
      }
    }
  },
  created() {
    this.role = localStorage.getItem('role')
    this.getPurchasePage()
  },
  methods: {
    // 搜索
    search() {
      this.pager.currPage = 1
      this.pager.pageSize = 10
      if (this.rangedDate != null) {
        this.searchData.start_date = this.rangedDate[0]
        this.searchData.end_date = this.rangedDate[1]
      } else {
        this.searchData.start_date = ''
        this.searchData.end_date = ''
      }
      this.getPurchasePage()
    },
    // 清空
    clear() {
      this.rangedDate = null
      this.searchData = {}
      this.getPurchasePage()
    },
    // 获取购货单分页列表
    async getPurchasePage() {
      let params = {
        page: this.pager.currPage,
        pageSize: this.pager.pageSize,
        start_date: this.searchData.start_date,
        end_date: this.searchData.end_date
      }
      const { data: result } = await this.$http.get('/goods', { params: params })
      this.loading = false
      if (result.status !== 200) return this.$message.error(result.msg)
      this.purchaseList = result.data
      this.pager = result.pager
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(pageSize) {
      this.pager.pageSize = pageSize
      this.getPurchasePage()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(currPage) {
      this.pager.currPage = currPage
      this.getPurchasePage()
    },
    // 编辑
    handleEdit(index, row) {
      this.$router.push({
        name: 'purchase-update',
        params: { id: row.id }
      })
    },
    // 打印
    handlePrint(index, row) {
      this.$router.push({
        name: 'print-purchase',
        params: { id: row.id }
      })
    },
    // 删除
    async handleDelete(index, row) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('是否确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)
      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      if (confirmResult !== 'confirm') {
        return
      }
      const { data: result } = await this.$http.delete('goods/' + row.id)
      if (result.status !== 200) {
        return this.$message.error(result.msg)
      }
      this.$message.success('删除成功！')
      this.getPurchasePage()
    },
    // 打开弹框
    async openBox(id, type) {
      const content = type ? '是否确认入库?' : '是否确认撤销入库?'
      const confirmResult = await this.$confirm(content, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)
      if (confirmResult !== 'confirm') {
        return
      }
      if (type) {
        const { data: result } = await this.$http.put('goods-confirm/' + id)
        if (result.status !== 200) {
          return this.$message.error(result.msg)
        }
        this.$message.success('修改成功！')
        this.getPurchasePage()
      } else {
        const { data: result } = await this.$http.put('goods-cancel/' + id)
        if (result.status !== 200) {
          return this.$message.error(result.msg)
        }
        this.$message.success('修改成功！')
        this.getPurchasePage()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.query {
  margin-bottom: 20px;
}
.el-select {
  width: 100%;
}
.el-date-editor {
  width: 100%;
}
</style>
